<template>
   <div class="updatebuilding-container">
          <div class="updatebuilding-top-container">
              <el-page-header @back="goBack" content="歌曲页面">
              </el-page-header>
          </div>
      
        <el-form  ref="form" status-icon   :model="form" label-width="80px">
        <el-form-item label="歌手Id" prop="singerId">
          <el-input v-model="form.singerId" style="width:95%"></el-input>
        </el-form-item>
        
         <el-form-item label="歌曲名" prop="name">
          <el-input  v-model="form.name" style="width:95%"></el-input>
        </el-form-item>

          <!--
            <el-form-item label="圖片" prop="password">
                <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
            </el-form-item>
      -->

       
      
      

         <el-form-item label="專輯" prop="album">
          <el-input  v-model="form.album" 
          style="width:95%">

          </el-input>
        </el-form-item>

        <el-form-item label="歌詞" prop="lyric">
          <el-input  v-model="form.lyric" 
           type="textarea"
          style="width:95%">

          </el-input>
        </el-form-item>

        

        <div class="button-container">
          
            <el-button type="primary" @click="submit()" >提交</el-button>
          
        </div>
      </el-form>
    
    </div>
</template>

<script>
import {getCurrentTime} from '../util'

export default {
    name:'addSong',
    data() {
      return {
         choice:'新增用戶',
         IsOk:'',
         form: {
            singerId: '',
            name: '',
            createTime:'',
            updateTime:'',
            pic:'',
            lyric:'',
            url:'',
            album:''
          },
         value: ''
       }
    },
    methods: {
        async submit(){
          let that=this;
          //update....
          
         if(this.$route.query.do=='add'){
          //add
          console.log('add??');
          await this.$axios.get("http://localhost:8081/addSong?singerId="
                                +this.form.singerId
                                +"&name="+this.form.name+
                                "&createTime="+getCurrentTime()
                                +"&updateTime="+getCurrentTime()+
                                "&lyric="+this.form.lyric+
                                "&url"+this.form.url+
                                "&album="+this.form.album
                                )
            .then((result) => {
                //console.log(result.data);
                that.$router.push({path:'/homepage/buildingInfo',query:{status:result.data}})
                return;
            }).catch((err) => {
              
            });
           }
          else if(this.$route.query.from=='ListSong'){
            await this.$axios.get("http://localhost:8081/updateSong?singerId="
                                +this.form.singerId
                                +"&name="+this.form.name+
                             
                                "&lyric="+this.form.lyric+
                                "&url="+this.form.url+
                                "&id="+this.$route.query.id+
                                "&album="+this.form.album+
                                "&updateTime="+this.form.updateTime
                                )
                .then(result=>{
                  that.$router.push({path:'/homepage/listSong',query:{status:result.data,SongListId:this.$route.query.SongListId}})
                })
              
          }
          else if(this.$route.query.do=='update')
          {
           await this.$axios.get("http://localhost:8081/updateSong?singerId="
                                +this.form.singerId
                                +"&name="+this.form.name+                          
                                "&lyric="+this.form.lyric+
                                "&url="+this.form.url+
                                "&id="+this.$route.query.id+
                                "&album="+this.form.album+
                                "&updateTime="+this.form.updateTime
                                
                                )
            .then((result) => {
                //console.log(result.data);
                that.$router.push({path:'/homepage/buildingInfo',query:{status:result.data}})
              
               
            })
          }
        },
        goBack(){
          if(this.$route.query.from=='ListSong')
          {
           this.$router.push({path:'/homepage/listSong',query:{SongListId:this.$route.query.SongListId}});
          }
          else{
           this.$router.push('/homepage/buildingInfo');
          }
        },
        load(){
          //console.log(this.$route);
          if(this.$route.query)
          {
           // this.form.id=this.$route.query.id;
            this.form.singerId=this.$route.query.singerId
            this.form.name=this.$route.query.name
            this.form.createTime=this.$route.query.createTime;
            this.form.updateTime=getCurrentTime();
            this.form.pic=this.$route.query.pic;
            this.form.lyric=this.$route.query.lyric;
            this.form.url=this.$route.query.url; 
            this.form.album=this.$route.query.album; 
          }
        }
    },
    mounted() {
      this.load();
    },

}
</script>

<style>

    .roomtype{
     float: left;
     position:absolute;
     left: 180px;
     line-height: 30px;
   }
   .updateroom-mid-container{
     padding: 40px;
     position: relative;
   }

   .updatebuilding-container{
     width: 80%;
     padding: 20px;
     
   }
   .updatebuilding-top-container{
     width: 100%;
     height: 50px;
     padding-left: 20px;
   }
   .el-textarea__inner{
     height: 200px;
   }
</style>